<template>
  <div class="payment">
    <Header left="arrow" title="订单结算"></Header>
    <Location></Location>
    <van-field
      class="tel"
      v-model="tel"
      clearable
      label-width="2rem"
      label="联系电话"
      placeholder="为方便您取茶，请填写手机号"
      input-align="left"
    >
      <template #button>
        <div class="tag">自动填写</div>
      </template>
    </van-field>
    <div class="progress" v-if="isTakeSelf == 1">
      <div class="font14">取茶时间</div>
      <van-progress
        class="line"
        :percentage="30"
        color="#a7d686"
        pivot-text=""
        stroke-width="50px"
        :show-pivot="false"
      />
      <div class="font14" style="margin: 0.3rem 0">
        前面<span class="font14c"
          ><i class="font18bold_c">1</i>单/<i class="font18bold_c">6</i>杯</span
        >制作中，预计<span class="font14c"
          ><i class="font18bold_c">4</i>分钟</span
        >后取茶
      </div>
      <div class="font13g">杯杯现制，新鲜呈现，请您留意取茶通知</div>
    </div>
    <div class="progress" v-else>
      <div class="font14">送达时间</div>
      <div class="font14" style="margin: 0.3rem 0">
          成功下单后，预计<span class="font14c"
          ><i class="font18bold_c">4</i>分钟</span
        >后送达
      </div>
      <div class="font13g">杯杯现制，新鲜呈现，请您留意骑手电话</div>
    </div>
    <div class="orderCard">
      <div
        class="commodities"
        v-for="(commodity, index) in orderData.commodityList"
        :key="index"
      >
        <div class="left">
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            :src="commodity.imgUrl"
          />
        </div>
        <div class="middle">
          <div class="font16">{{ commodity.commodityName }}</div>
          <div class="font_gray11">{{ commodity.properties }}</div>
        </div>
        <div class="right">
          <div class="price">￥{{ commodity.price }}</div>
          <div class="count">共{{ commodity.count }}件</div>
        </div>
      </div>
      <van-cell-group>
        <van-cell center label="保冷保暖，锁住新鲜感" label-class="labelClass"
          ><template #title>
            <span class="custom-title">灵感保温袋</span>
            <van-tag color="#dba871" text-color="#fff">推荐选择</van-tag>
          </template>
          <template #default>
            <div class="bag">
              <van-checkbox
                checked-color="#dba871"
                v-model="isBag"
              ></van-checkbox>
              <span class="font18">￥1</span>
            </div>
          </template></van-cell
        >
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />
        <van-cell to="remark" title="备注" is-link>
          <template #default>
            <div class="van-ellipsis">{{ orderData.remark }}</div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="payWay">
      <van-cell title="支付方式" is-link @click="showPayWay = true">
        <template #default>
          <div class="bag">
            <span v-if="payWay == '1'" class="font14 left"
              ><i
                class="iconfont icon-weixinzhifu"
                style="color: #09bb07; margin-right: 0.2rem"
              ></i
              >微信支付</span
            >
            <span v-else-if="payWay == '2'" class="font14 left"
              ><i
                class="iconfont icon-zhifubao"
                style="color: #02a9f1; margin-right: 0.2rem"
              ></i
              >支付宝</span
            >
          </div>
        </template>
      </van-cell>
    </div>

    <!-- 动作面板 -->
    <van-action-sheet v-model="showPayWay" title="支付方式">
      <div class="content">
        <van-radio-group v-model="payWay">
          <div class="item">
            <div class="font18 left">
              <i
                class="iconfont icon-weixinzhifu font32"
                style="color: #09bb07; margin-right: 0.2rem"
              ></i
              >微信支付
            </div>
            <van-radio checked-color="#dba871" name="1"></van-radio>
          </div>
          <div class="item">
            <div class="font18 left">
              <i
                class="iconfont icon-zhifubao font32"
                style="color: #02a9f1; margin-right: 0.2rem"
              ></i
              >支付宝
            </div>
            <van-radio checked-color="#dba871" name="2"></van-radio></div
        ></van-radio-group>
      </div>
    </van-action-sheet>
    <!-- 底部支付导航 -->
    <div class="footer">
      <div class="footer-right" @click="payment">支付</div>
      <div class="footer-left font16">
        合计
        <div class="all_price">￥{{ allPrice }}</div>
      </div>
    </div>
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
  </div>
</template>

<script>
import orderApi from "@/api/order";

import common from "../../utils/common";
import Vue from "vue";
import {
  Field,
  Progress,
  Image as VanImage,
  Overlay,
  Cell,
  CellGroup,
  Tag,
  CouponCell,
  CouponList,
  Popup,
  Checkbox,
  ActionSheet,
  RadioGroup,
  Radio,
} from "vant";

Vue.use(Field)
  .use(Progress)
  .use(VanImage)
  .use(Overlay)
  .use(Cell)
  .use(CellGroup)
  .use(Tag)
  .use(CouponCell)
  .use(CouponList)
  .use(Popup)
  .use(Checkbox)
  .use(ActionSheet)
  .use(RadioGroup)
  .use(Radio);

import Header from "@/components/Header";
import Location from "@/components/commodity/Location";
export default {
  name: "orderDetail",
  components: {
    Header,
    Location,
  },
  mounted() {
    var orderData = this.$store.getters.orderData;
    if (orderData.isBag == 1) {
      this.isBag = true;
    } else {
      this.isBag = false;
    }
    if (orderData.chosenCoupon) {
      this.chosenCoupon = orderData.chosenCoupon;
    } else {
      this.chosenCoupon = -1;
    }
    this.tel = orderData.tel;
    this.payWay = "1";
  },
  data() {
    return {
      orderData: this.$store.getters.orderData,
      tel: this.$store.getters.orderData.tel,
      //确认选择的优惠卷索引
      chosenCoupon: -1,
      isBag: false,
      allPrice: common.getAllPrice(this.$store.getters.cart.commodityList),
      //   优惠卷
      showList: false,
      //支付方式
      showPayWay: false,
      payWay: "",
      coupons: [
        {
          id: "1",
          condition: "无使用门槛\n最多优惠12元",
          reason: "不可用原因，优惠券不可用时展示",
          value: 150,
          name: "新用户首单优惠卷",
          startAt: "1489104000",
          endAt: "1514592000",
          valueDesc: "1.5",
          unitDesc: "元",
          description: "描述信息，优惠券可用时展示",
        },
        {
          id: "2",
          condition: "无使用门槛\n最多优惠12万元",
          reason: "不可用原因，优惠券不可用时展示",
          value: 250,
          name: "优惠券名称",
          startAt: 1489104000,
          endAt: 1514592000,
          valueDesc: "2.5",
          unitDesc: "元",
          description: "描述信息，优惠券可用时展示",
        },
      ],
      disabledCoupons: [
        {
          id: "3",
          condition: "无使用门槛\n最多优惠120元",
          reason: "不可用原因，优惠券不可用时展示",
          value: 150,
          name: "优惠券名称",
          startAt: 1489104000,
          endAt: 1514592000,
          valueDesc: "1.5",
          unitDesc: "元",
          reason: "不可用原因，优惠券不可用时展示",
        },
      ],
    };
  },
  computed: {
    storeInfo() {
      return this.$store.getters.storeInfo;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    },
    isTakeSelf() {
      return this.$store.getters.isTakeSelf;
    },
  },
  watch: {
    tel(newValue, oldValue) {
      this.orderData.tel = newValue;
      this.$store.dispatch("setOrder", this.orderData);
    },
    payWay(newValue, oldValue) {
      if (newValue != oldValue) {
        this.showPayWay = false;
      }
      this.orderData.payWay = newValue;
      this.$store.dispatch("setOrder", this.orderData);
    },
    isBag(newValue, oldValue) {
      if (newValue) {
        this.allPrice = parseFloat(this.allPrice) + parseFloat(1);
        this.orderData.isBag = 1;
      } else {
        this.allPrice = parseFloat(this.allPrice) - parseFloat(1);
        this.orderData.isBag = 0;
      }
      this.$store.dispatch("setOrder", this.orderData);
    },
    chosenCoupon(newValue, oldValue) {
      if (newValue != -1) {
        if (oldValue != -1) {
          //非第一次选择，恢复价格
          var coupon = this.coupons[oldValue];
          this.allPrice =
            parseFloat(this.allPrice) + parseFloat(coupon.valueDesc);
        }
        coupon = this.coupons[newValue];
        this.allPrice =
          parseFloat(this.allPrice) - parseFloat(coupon.valueDesc);
        //存入orderData
        this.orderData.chosenCoupon = newValue;
        this.orderData.couponId = coupon.id;
        this.$store.dispatch("setOrder", this.orderData);
      } else {
        //取消使用优惠卷
        var coupon = this.coupons[oldValue];
        this.allPrice =
          parseFloat(this.allPrice) + parseFloat(coupon.valueDesc);

        this.orderData.chosenCoupon = null;
        this.orderData.couponId = null;
        this.$store.dispatch("setOrder", this.orderData);
      }
    },
  },
  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    payment() {
      this.orderData.totalPrice = this.allPrice;
      console.log("支付", this.orderData);
      var formData = new FormData();
      formData.append(
        "commodityListJSON",
        JSON.stringify(this.orderData.commodityList)
      );
      formData.append("couponId", this.orderData.couponId);
      formData.append("isBag", this.orderData.isBag);
      formData.append("remark", this.orderData.remark);
      formData.append("tel", this.orderData.tel);
      formData.append("isTakeSelf", this.$store.getters.isTakeSelf);
      formData.append("totalPrice", this.orderData.totalPrice);
      formData.append("payWay", this.orderData.payWay);
      formData.append("userId", this.userInfo.userId);
      formData.append("storeId", this.storeInfo.storeId);
      formData.append("state", 0);
      orderApi.addOrder(formData).then((response) => {
        if (response.data.code == "200") {
          this.$router.push("/order");
        }
      });
    },
  },
};
</script>

<style scoped>
.payment {
  padding-bottom: 3.4rem;
  padding-top: 2.13rem;
  display: flex;
  flex-direction: column;
  overflow: scroll;
  background-color: #f6f6f6;
}
.tel {
  padding: 0.26667rem 0.5rem !important;
}
.orderCard ::v-deep .van-cell {
  padding: 0.26667rem 0rem;
}
.tag {
  border-radius: 2px;
  width: 1.6rem;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  border: 1px solid #dba871;
  color: #dba871;
  font-size: 12px;
}
.progress {
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: #fff;
  margin: 0.3rem 0 0 0;
  padding: 0.5rem;
  /* border-radius: 10px; */
}
.progress .line {
  margin-top: 0.3rem;
}
.orderCard {
  min-height: 1rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0.3rem 0 0 0;
  padding: 0.5rem;
  /* border-radius: 10px; */
}
.orderCard .commodities {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  widows: 100%;
  margin-top: 0.3rem;
  border-bottom: 1px solid #f9f9f9;
  padding-bottom: 0.5rem;
}
.orderCard .commodities .left {
  width: 15%;
  min-height: 1.5rem;
  margin-right: 0.3rem;
}
.orderCard .commodities .middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0.3rem;
}
.orderCard .commodities .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
}
.orderCard .commodities .right .price {
  font-size: 16px;
  color: #333;
}
.orderCard .commodities .right .count {
  font-size: 12px;
  color: gray;
  min-height: 0.8rem;
  margin-top: 0.1rem;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0rem;
  height: 1.5rem;
  display: flex;
  flex-direction: row-reverse;
  background-color: #fff;
  z-index: 10;
  border-top: 1px solid #f6f6f6;
}
.footer-left {
  display: flex;
  flex-direction: row;
  z-index: 1;
  line-height: 1.5rem;
}
.all_price {
  font-size: 24px;
  color: #333;
  line-height: 1.5rem;
  margin: 0 0.6rem 0 0.1rem;
}
.footer-right {
  width: 3rem;
  line-height: 1.5rem;
  text-align: center;
  font-size: 24px;
  color: #fff;
  background-color: #dba871;
  z-index: 10;
}
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}
.labelClass {
  color: #dba871;
}
.bag {
  display: flex;
  flex-direction: row-reverse;
}
.bag span {
  margin-right: 0.2rem;
  color: #333;
}
.payWay {
  min-height: 1rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0.3rem 0 0 0;
}
.content {
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}
.content .item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.3rem 0.5rem;
  height: 1rem;
  line-height: 1rem;
}
.left {
  display: flex;
  flex-direction: row;
}
</style>